<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习1</title>
	<style>
		*{
			outline: none;
			box-sizing: border-box;
		}
		body{
			font-family: "微软雅黑";
		}
		#box{
			/*padding: 10px;*/
			border: solid #28a956 3px;
			width: 400px;
			border-bottom: none;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		p{
			margin: 0;
			margin-bottom: 10px;
		}
		#box li{
			/*padding: 10px;*/
			margin: 0;
			border-bottom: 3px #28a956 solid;
			padding: 10px;
			font-size: 14px;
		}
		input{
			border:none;
			background: #28a956;
			color: #fff;
			vertical-align: top;
			padding: 10px;
		}
		button{
			border: none;
			background: #28a956;
			color: #fff;
			vertical-align: top;
			padding: 10px;
		}
		#add{
			margin-top: 10px;
			width: 400px;
		}
		#message{
			
		}
		#add button{
			border:solid 1px #28a956;
		}
		#add input[type="text"]{
			display: block;
			border:solid 1px #28a956;
			background: #fff;
			color: #333;
			margin-bottom: 10px;
			width: 100%;
			font-family: "微软雅黑"
		}
	</style>
</head>
<body>
	<ul id="box">
		<!-- <li>
			<p>张三</p>
			<div>
				<input type="text" value="留言留言留言"><button>确认修改</button>
			</div>
		</li>
		<li>
			<p>张三</p>
			<div>
				<span id="span">留言留言留言留言留言留言留言留言留言</span>			
			</div>
		</li>
		<li>
			<p>张三</p>
			<div>
				<span id="span">留言留言留言留言留言留言留言留言留言</span>			
			</div>
		</li>
		<li>
			<p>张三</p>
			<div>
				<span id="span">留言留言留言留言留言留言留言留言留言</span>			
			</div>
		</li> -->
	</ul>

	<div id="add">
		<div>
			<input type="text" id="name" placeholder="请输入您的姓名">
			<input type="text" id="message" placeholder="请输入您的留言信息">
		</div>
		<div></div>
		<div>
			<button id="btn">添加留言</button>	
			<button id="clear">清空留言</button>
		</div>
	</div>
	
	<script>
		window.onload = function(){
			//获取DOM对象
			var btn = document.getElementById("btn");
			var _name = document.getElementById("name");
			var message = document.getElementById("message");
			var box = document.getElementById("box");
			var clearMessage = document.getElementById("clear");
			var m=0;
			//判断web本地存储中是否存的有i，若有则将存储的i值赋值给i，若没有给i赋值0
			if(localStorage.i){
				i = localStorage.i;
			}else{
				var i = 0;
			}
			//加载时渲染页面
			render();
			//给添加留言按钮添加点击事件
			btn.onclick = storage;
			//点击时执行storage()函数
			function storage(){
				//输入框为空时，提示内容
				if(_name.value==""){
					_name.placeholder = "请输入姓名！"
				}
				if(message.value==""){
					message.placeholder = "请输入留言！"
				}
				//不为空时
				else{
					i++;//i值记录第几次点击，后面渲染时按i的顺序渲染
					localStorage.i = i;
					localStorage[i+"楼  "+_name.value] = message.value;//将i值加入到键里，渲染到页面，以便后面修改用
					render();
					_name.value = "";
					message.value = "";
				}
			}

			//渲染页面函数
			function render(){
				var data = "";
				//循环i以按顺序渲染
				for(var j=1;j<=i;j++){
					for(var key in localStorage){
						//例，当j为1时，找localStorage里带有1标记的key第一个渲染，依次进行...
						if(key != "i" && key.indexOf(j)!=-1){
							data += "<li><p>"+key+"：</p><div><span>"+localStorage[key]+"</span></div></li>"
						}
					}
				}
				box.innerHTML = data || "<li>暂时没有留言</li>";//当本地存储里没有数据时，显示后面的内容
			}

			//清除按钮，清空本地存储
			clearMessage.onclick = function(){
				localStorage.clear();
				render();
				i = 0;
			}


			//事件委托
			box.onclick = function(event){
				var e = event||window.event;
				var target = e.target||e.srcElement;
				if(target.nodeName.toLowerCase()=="span"){
					target.outerHTML = "<input type=\"text\" value=\""+target.innerHTML+"\"><button class='edit'>确认修改</button><button class='del'>删除</button>";
				}
				//编辑
				if(target.className=="edit"){
					var index = target.parentNode.previousSibling.innerHTML;
					index = index.slice(0,index.length-1);
					localStorage[index] = target.previousSibling.value;
					render();
				}
				//删除
				if(target.className=="del"){
					var index = target.parentNode.previousSibling.innerHTML;
					index = index.slice(0,index.length-1);
					localStorage.removeItem(index);
					render();
					//当页面中删除的次数与i值相等，即全部删完时，将i值清零
					m++;
					if(localStorage.i==m){
						i=0;
						localStorage.i=0;
					}
				}
			}


			//键盘事件
			//输入姓名框按回车，留言框获得焦点
			_name.onkeydown = function(event){
				var e = event||window.event;
				var keyCode = e.keyCode || e.which;
				if(keyCode == 13 || keyCode == 108){
					message.focus();
				}
			}
			//留言框回车，执行点击事件，并使姓名框获得焦点
			message.onkeydown = function(event){
				var e = event||window.event;
				var keyCode = e.keyCode || e.which;
				if(keyCode == 13 || keyCode == 108){
					btn.click();
					_name.focus();
				}
			}
		}
	</script>
</body>
</html>